<template>
  <div class="min-h-screen font-sans antialiased overflow-x-hidden">
    <!-- Floating Particles -->
    <div id="particles" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div>
    
    <!-- Main Content -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  },
  watch: {
    $route(to, from) {
      document.title = "FLOX - " + to.meta.title || '默认标题';
    }
  },
  mounted() {
    document.title = "FLOX - " + this.$route.meta.title || '默认标题';
    this.createParticles();
  },
  methods: {
    createParticles() {
      const particles = document.getElementById('particles');
      const particleCount = 50;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'absolute rounded-full';
        particle.style.width = `${Math.random() * 5 + 2}px`;
        particle.style.height = particle.style.width;
        particle.style.background = `rgba(255, 255, 255, ${Math.random() * 0.3 + 0.1})`;
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.animation = `float ${Math.random() * 10 + 10}s linear infinite`;
        particle.style.opacity = Math.random() * 0.5 + 0.3;
        particles.appendChild(particle);
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #111827, #1f2937);
  color: white;
  overflow-x: hidden;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(0) translateX(20px);
  }
  75% {
    transform: translateY(20px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}
</style>
